<template>
  <div class="sidebar-section">
    <h3>价格筛选</h3>
    <div class="filter-group">
      <div class="price-range">
        <input type="number" placeholder="最低价" min="0" v-model="minPrice" @change="validateMinPrice">
        <span>-</span>
        <input type="number" placeholder="最高价" min="0" v-model="maxPrice" @change="validateMaxPrice">
      </div>
    </div>
    <button type="button" class="submit-btn" style="width:100%; margin-top:10px;" @click="changePriceRange">确定
    </button>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {defineEmits} from 'vue'
import {ElMessage} from "element-plus";

const emit = defineEmits(['price-filter'])
const minPrice = ref('')
const maxPrice = ref('')

const changePriceRange = () => {
  if (!validatePriceRange()) {
    return;
  }
  emit('price-filter', {
    min: minPrice.value,
    max: maxPrice.value
  })
}

const validateMinPrice = () => {
  if ('' !== minPrice.value && minPrice.value <= 0) {
    ElMessage.warning('最低价不能小于0');
    minPrice.value = '';
    return false
  }
  return validatePriceRange();
}
const validateMaxPrice = () => {
  if ('' !== maxPrice.value && maxPrice.value <= 0) {
    ElMessage.warning('最高价不能小于0');
    maxPrice.value = '';
    return false
  }
  return validatePriceRange();
}
const validatePriceRange = () => {
  if ('' !== minPrice.value && '' !== maxPrice.value && minPrice.value >= maxPrice.value) {
    ElMessage.warning('最低价不能大于或等于最高价');
    minPrice.value = '';
    maxPrice.value = '';
    return false
  }
  return true;
}
</script>

<style scoped>
.sidebar-section {
  margin-bottom: 25px;
}

.sidebar-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  color: #212529;
}

.filter-group {
  margin-bottom: 15px;
}

.filter-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.filter-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.price-range {
  display: flex;
  gap: 10px;
  align-items: center;
}

.price-range input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.price-range span {
  color: #6c757d;
}

/* 新增确定按钮样式 */
.submit-btn {
  width: 100%;
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #007BFF; /* 主色调背景 */
  color: white; /* 白色文字 */
  border: none; /* 移除默认边框 */
  border-radius: 4px; /* 圆角 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  transition: background-color 0.2s ease; /* 平滑过渡效果 */
  font-size: 14px;
}

/* 按钮 hover 状态 */
.submit-btn:hover {
  background-color: #0056b3; /* 深色背景 */
}
</style>